<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        html,body {
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }

        li {
            list-style: none;
        }

        #header {
            height: 60px;
            background: url(../colorboom/img/矩形\ 25\ 拷贝.png);
            background-size: cover;
            line-height: 20px;
        }

        .dibu {
            height: 60px;
            background: url(../colorboom/img/矩形\ 25\ 拷贝.png);
        }

        #header .container {
            margin: 0 auto;
            /* 块元素水平居中小技巧*/
            display: flex;
            justify-content: space-between;
            cursor: pointer;
        }

        #header li {
            margin-left: 50px;
        }

        #header .flex {
            display: flex;
            width: 500px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #FFFFFF;
            font-size: 20px;
        }

        #header .LOGO {
            margin-left: 20px;
            font-size: 24px;
        }

        .background {
            background-image: url("https://file03.16sucai.com/2017/1100/16sucai_P59202A240.JPG");
            background-size: cover;
            background-position: 50% 50%;
            height: 150vh;
            font: 900 39rem '';
            line-height: 130vh;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            position: relative;
            text-align: center;
            overflow: hidden;

        }

        .background::before {
            content: '';
            background-size: cover;
            background-image: inherit;
            background-position: 50% 50%;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: -99;
        }

        h2 {
            position: absolute;
            letter-spacing: 2px;
            top: 120vh;
            /* width: 60%; */
            color: #fff;
            left: 50%;
            transform: translateX(-50%);
            padding: 30px;
            background-color: rgba(0, 0, 0, .3);
        }

        a {
            text-decoration: none;
            color: #fff;
            font-size: 80px;
        }

        .text-gradient {
            background-image: linear-gradient(to right, rgb(88, 132, 235), rgba(228, 69, 25, 0.919));
            -webkit-background-clip: text;
            color: transparent;
        }

        #header .container .shouye {
            height: 25px;
            width: 80px;
            background: #FE6913;
            border-radius: 5px;
            text-align: center;
        }

        .c {
            font-size: 14px;
            font-weight: 400;
            color: #FFFFFF;
            text-align: center;
            line-height: 60px;
        }
    </style>
</head>

<body>
    <header id="header">
        <div class="container">
            <ul class="flex"><li class="LOGO">ColorBoom</li></ul>
            <ul class="flex"><li class="shouye"><div>首页</div></li>
                <li>壁纸</li>
                <li>联系我</li>
            </ul>
        </div>
    </header>
    <div class="background"><span>Bom</span></div>
    <h2>
        <a href="../colorboom/index.html"> <span class="text-gradient">开始游戏</span> </a>
    </h2>
    <section class="dibu">
        <div class="c">@ 作者：哈尔滨理工大学 软件20-4 苏煜</div>
    </section>
    <script>
        const background = document.querySelector(".background")

        document.addEventListener('scroll', () => {
            const scrollY = window.scrollY
            if (scrollY !== 0) {
                background.style.backgroundPosition = `calc(50% + ${scrollY}px) calc(50% + ${scrollY}px)`
            } else {
                background.style.backgroundPosition = ''
            }
        })
    </script>
</body>

</html>